import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Button } from 'antd-mobile'
import Avatar from '@/components/Avatar'
import Tag from '@/components/Tag'
import css from './info.module.scss'
import Upzhu from '@/assets/images/upzhu.png'
import Enterprise from '@/assets/images/enterprise.png'
import { spaceApi } from '@/api'
import { formatNumber } from '@/utils'
export default class SpaceInfo extends PureComponent {
    static propTypes = {
        detailData: PropTypes.object,
        mid: PropTypes.oneOfType([
            PropTypes.number,
            PropTypes.string
        ])
    }

    state = {
        folllowData: null,
        beliked: null,
        isExpand: false
    }

    get userInfo() {
        return this.props?.detailData ?? null
    }

    get sexClass() {
        let cls = 'fa-male'
        if (this.userInfo.sex === '女') {
            cls = 'fa-female'
        }
        return cls
    }
    get isMember() {
        return this.userInfo?.vip?.status === 1 ?? false
    }

    get memberText () {
        let text = ''
        if (this.isMember) {
          const vipType = this.userInfo.vip.type
          switch (vipType) {
            case 1:
              text = '大会员'
              break
            case 2:
              text = '年度大会员'
              break
            default:
              text = ''
          }
        }
        return text
    }

    initData = async () => {
        try {
            await this.getSocial()
            await this.getBeliked()
        } catch (error) {
            
        }   
    }    

    getSocial = async () => {
        try {
            const { data } = await spaceApi.getUserStat({
                vmid: this.props.mid
            })
            if (data) {
                this.setState({
                    folllowData: data
                })
            }
        } catch (error) {
            
        }
    }

    getBeliked = async () => {
        try {
            const { data } = await spaceApi.getUserUpStat({
                mid: this.props.mid
            })
            if (data) {
                this.setState({
                    beliked: data.likes
                })
            }
        } catch (error) {
            
        }
    }

    formatSign = (value) => {
        return value || '这个人很神秘，什么都没有写'
    }

    toggleDetail = () => {
        this.setState({
            isExpand: !this.state.isExpand
        })
    }

    componentDidMount() {
        this.initData()
    }

    componentDidUpdate(prevProps) {
        if (prevProps.mid !== this.props.mid) {
            this.initData()
        }
    }

    render() {
        const userInfo = this.userInfo
        const { folllowData, beliked, isExpand } = this.state
        if (!userInfo) {
            return null
        } else {
            return (
                <div className={css["wrap"]}>
                    <div className={css["banner"]}></div>
                    <div className={css["head"]}>
                        <Avatar 
                            className="face" 
                            size="large"
                            src={userInfo.face} 
                            vip={userInfo.vip.status} 
                            official={userInfo.official} 
                            round  
                        />
                        <div className={css["head-content"]}>
                            { folllowData && 
                                <>
                                    <div className={css["grid"]}>
                                        <div className="col">
                                            <span className="num">{ formatNumber(folllowData.follower) }</span>
                                            <span className="unit">粉丝</span>
                                        </div>
                                        <div className="col">
                                            <span className="num">{ formatNumber(folllowData.following) }</span>
                                            <span className="unit">关注</span>
                                        </div>
                                        <div className="col">
                                            <span className="num">{ formatNumber(beliked) }</span>
                                            <span className="unit">获赞</span>
                                        </div>
                                    </div>
                                    <Button className={css["focus-btn"]} type="primary" size="small" disabled={userInfo.is_followed}><i className="fa fa-plus"></i>关注</Button>
                                </>
                            }                            
                        </div>
                    </div>
                    <div className={css["content"]}>
                        <div>
                            <span className="name">{userInfo.name}</span>
                            { userInfo.sex !== '保密' && <i className={`fa sex ${this.sexClass}`}></i> }
                            <span className={`level level${userInfo.level}`}>
                                <i className={`fa fa-level-${userInfo.level}`}></i>
                            </span>                            
                            { this.isMember && <Tag className="vip" size="medium">{ this.memberText }</Tag> }
                        </div>
                        <div className={css["content-body"]}>
                            { userInfo.official.role > 0 && 
                                <>  
                                    { userInfo.official.type === 0 && <img className="offical" src={Upzhu} alt="up主" /> }
                                    { userInfo.official.type === 1 && <img className="offical" src={Enterprise} alt="企业" /> }

                                    <div className={`sign ${isExpand ? 'sign-open' : ''}`}>
                                        bilibili UP主认证 { userInfo.official.title }
                                    </div>
                                </> 
                            }
                            { userInfo.official.role <=0 && 
                                <div className={`desc ${isExpand ? 'desc-open' : ''}`}>{this.formatSign(userInfo.sign)}</div>}
                            <span className="btn" onClick={this.toggleDetail}>{isExpand ? '收起' : '展开'}</span>
                        </div>
                        <div className={css["content-foot"]}>
                            { userInfo.official.role > 0 && <div className="desc">{this.formatSign(userInfo.sign)}</div> }
                            { isExpand && 
                                <>
                                    { userInfo.fans_badge && <Tag className="badge" size="medium">粉丝勋章</Tag> }
                                    <Tag className="badge" size="medium">uid:{userInfo.mid}</Tag>
                                </>
                            }
                        </div>
                    </div>
                </div>
            )
        }        
    }
}
